<template>
  <div class="handle" v-show="childHandle">
    <div class="time" v-if="itemInfo.pay_style ==='wx_jsapi'">
      <span >距离订单取消 </span>
      <span class="num">{{ hour }}&nbsp;:&nbsp;</span>
      <span class="num">{{ minute }}&nbsp;:&nbsp;</span>
      <span class="num">{{ second }}</span>
    </div>
    <div class="btns">
      <input type="button" value="取消订单" @click.stop="cancelO">
      <input type="button" value="付款" class="pay" @click.stop="pay" v-if="itemInfo.pay_style ==='wx_jsapi'">
    </div>
  </div>
</template>

<script>
import { OrderPay_wxJsapi, cancelOrder, getOrderInfo } from "@/api/index";
export default {
  data() {
    return {
      day: "",
      hour: "",
      minute: "",
      second: ""
    };
  },
  props: ["childHandle", "time", "orderNo", "itemInfo"],
  created() {
    getOrderInfo(this.orderNo).then(result => {
      this.time = result.data.time;
      const nowTime = new Date().getTime();
      const endDate =
        new Date(this.time.replace(/-/g, "/")).getTime() + 86400000;
      var residue = endDate - nowTime;
      setInterval(() => {
        residue = residue - 1000;
        this.day = Math.floor(residue / 1000 / 3600 / 24) + "";
        this.hour =
          Math.floor((residue / 1000 / 3600) % 24) < 10
            ? "0" + Math.floor((residue / 1000 / 3600) % 24)
            : Math.floor((residue / 1000 / 3600) % 24) + ""; //residue / 1000 秒 / 60 分 / 60 时
        this.minute =
          Math.floor(((residue / 1000) % 3600) / 60) < 10
            ? "0" + Math.floor(((residue / 1000) % 3600) / 60)
            : Math.floor(((residue / 1000) % 3600) / 60) + "";
        this.second =
          parseInt(((residue / 1000) % 3600) % 60) < 10
            ? "0" + parseInt(((residue / 1000) % 3600) % 60)
            : parseInt(((residue / 1000) % 3600) % 60) + "";
      }, 1000);
    });
  },
  methods: {
    pay() {
      const orderInfo = {
        order_no: this.orderNo,
        addrInfo: this.itemInfo,
        totalPrice: this.itemInfo.price * this.itemInfo.num
      };
      this.$emit("pay", orderInfo);
    },
    cancelO() {
      cancelOrder(this.orderNo).then(result => {
        if (result.data.success == "yes") {
          this.$toast({
            message: "订单取消成功",
            iconClass: "iconfont icon-dagou_wuquan"
          });
          this.$emit("cancel");
        } else {
          this.$toast({
            message: result.data.message,
            iconClass: "iconfont icon-X"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.handle {
  height: to(68);
  line-height: to(50);
  padding: 0 to(15);
  // margin-top: to(15);
  background-color: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  .time {
    display: flex;
    display: -webkit-flex;
    span {
      font-size: to(20);
      color: #404040;
      line-height: to(68);
      text-align: center;
      &:nth-child(1) {
        margin-right: to(18);
      }
      &.num {
        color: #aa0000;
      }
    }
  }
  .btns {
    display: flex;
    display: -webkit-flex;
  }
  input {
    float: right;
    height: to(43);
    line-height: to(43);
    width: to(104);
    color: #000;
    background-color: #fff;
    border: 1px solid #c8c8c8;
    border-radius: to(5);
    font-size: to(20);
    margin-top: to(12);
    -webkit-appearance: none;
    &.pay {
      color: white;
      border: 0;
      background-color: #aa0000;
      margin-left: to(27);
    }
  }
}
</style>


